<template>
  <div class="container">
    <span :style="{ 'color': sex == '男' ? 'blue' : 'red' }">{{ sex }}</span>
    <el-button type="primary" link size="small" @click="buttonClicked">选择性别</el-button>
  </div>

  <!-- 性别选择对话框 -->
  <el-dialog v-model="showGenderSelector" title="选择性别" width="400px" :close-on-click-modal="false"
    @close="closeSelector" append-to-body>
    <el-radio-group v-model="selectedGender">
      <el-radio value="男" border>男</el-radio>
      <el-radio value="女" border>女</el-radio>
    </el-radio-group>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="closeSelector">取消</el-button>
        <el-button type="primary" @click="submitGender" :disabled="!selectedGender">
          确认
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, watchEffect } from 'vue'
import type { ICellRendererParams } from 'ag-grid-community'
import type { IOlympicData } from '@/views/types'

// 定义 Props
interface Props {
  params: ICellRendererParams<IOlympicData, IOlympicData['gender']> & { rowData: IOlympicData[] }
}

const props = defineProps<Props>()

watchEffect(() => {
  console.log('', props.params, props.params.rowData)
})

// 定义状态
const sex = ref<string>('')
const showGenderSelector = ref<boolean>(false)
const selectedGender = ref<string>('')

// 初始化数据
sex.value = String(props.params.valueFormatted || props.params.value || '')
selectedGender.value = props.params.data?.gender || ''

// 方法
const buttonClicked = () => {
  showGenderSelector.value = true
}

const closeSelector = () => {
  showGenderSelector.value = false
  selectedGender.value = props.params.data?.gender || ''
}

const submitGender = () => {
  if (selectedGender.value && props.params.node && props.params.column) {
    // 使用 AG Grid 的 setDataValue 方法更新数据
    props.params.node.setDataValue(props.params.column.getId(), selectedGender.value)

    console.log(`性别已更新为: ${selectedGender.value}`)
    closeSelector()
  }
}
</script>

<style module>
/* :class="$style["total-value-renderer"]" :class="$style.total-value-renderer" */
/* .total-value-renderer {} */
</style>

<style scoped>
.container {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}
</style>
